<!--_meta 作为公共模版分离出去-->
{include file="public/meta" /}
<!--/meta 作为公共模版分离出去-->
<title>区域图 - 系统统计 - h-ui.admin.pro v1.0</title>
</head>
<body>
<div class="wap-container">
    <nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
        首页
        <span class="c-gray en">/</span>
        会员统计
        <span class="c-gray en">/</span>
        区域图
        <a class="btn btn-success radius f-r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="Hui-admin-content clearfix">
        <div class="panel">
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel">
                            <div class="panel-header">
                                地图
                            </div>
                            <div class="panel-body">
                                <div id="echarts-1" style="height:520px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <article>
</div>
<!--_footer 作为公共模版分离出去-->
{include file="public/footer" /}
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="{__STATIC_PATH}admin/lib/echarts/4.1.0.rc2/echarts.min.js"></script>
<script type="text/javascript" src="{__STATIC_PATH}admin/lib/echarts/4.1.0.rc2/china.js"></script>
<script type="text/javascript" src="{__STATIC_PATH}admin/lib/echarts/4.1.0.rc2/all-province.js"></script>
<script type="text/javascript">

    var chinaData;
    $.ajax({
        url: "city",
        type: "post",
        async:false,
        data: {
        },
        success: function (res) {
            if (res.code == 1) {
                // console.log(res.result);
                chinaData=res.result;
            } else {
            }
        }
    })
    // chinaData=$.parseJson(chinaData)
    // $.each(chinaData,function(i,v){
    //     console.log(i,v);
    // })
    // chinaData=chinaData.split(",");
    // console.log(chinaData)
    // // chinaData=atime.split(",");


    function changeMap() {
        var myChart = echarts.init(document.getElementById('echarts-1'));
        option = {
            title: {
                show: false
            },
            tooltip: {
                trigger: 'item',
            },
            legend: {
                left: 'left',
                data: ['强'],
                textStyle: {
                    color: '#ccc'
                }
            },
            dataRange: {
                min: 0,
                max: 500,
                x: 'left',
                y: 'bottom',
                text: ['高', '低'],
                calculable: true,
                color: ["#1890ff", "#e2fbfe"]
            },
            toolbox: {
                show: false,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
                {
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    selectedMode: 'single',
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true,
                            itemStyle: {
                                areaColor: '#296fd6',
                            }
                        }
                    },
                    data: chinaData,
                }
            ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    $(function () {
        changeMap();
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
